<template>
  <table class="complex-header" cellspacing="0" cellpadding="0">
    <tr>
      <template v-for="(item, index) in columns">
        <!--比例尺列或者文字列-->
        <template v-if="isSimpleColumn(item)">
          <td class="complex-header-item" :key="index">
            <div
              :style="getSimpleColumnStyle(item)"
              class="header-box label-box"
              v-text="item.headerLabel"
            ></div>
          </td>
        </template>
        <!--统计列-->
        <template v-else-if="item.type === 'count'">
          <td class="complex-header-item" :key="index">
            <div
              class="count-header-item"
              v-for="(c, cindex) in item.children"
              :key="cindex"
            >
              <div
                class="clabel label-box"
                v-text="c.headerLabel"
                :style="getCountItemStyle(item, c)"
              ></div>
              <div class="clegend" :style="getLegendStyle(c)">
                <span v-html="getLegendText(c, 0)"></span>
                <template v-if="c.type !== 'point'">
                  <span
                    class="legend"
                    :style="{ backgroundColor: c.color || '#000' }"
                  ></span>
                </template>
                <template v-else>
                  <complex-header-legend
                    class="point-legend"
                    :option="c"
                  ></complex-header-legend>
                </template>

                <span v-html="getLegendText(c, 1)" class="cend"></span>
              </div>
            </div>
          </td>
        </template>
        <!--分组列-->
        <template v-else-if="item.type === 'group'">
          <td
            class="complex-header-item group-item"
            :key="index"
            style="vertical-align: top"
          >
            <div class="group-name" v-text="item.headerLabel"></div>
            <complex-header
              class="group-header"
              :columns="item.children"
            ></complex-header>
          </td>
        </template>
      </template>
    </tr>
  </table>
</template>
<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";
import ComplexHeaderLegend from "./ComplexHeaderLegend.vue";

const DEFAULT_COLUMN_WIDTH = 50;

@Component({
  name: "ComplexHeader",
  components: { ComplexHeaderLegend }
})
export default class ComplexHeader extends Vue {
  @Prop({
    required: true
  })
  private columns!: ComplexColumn;

  private isSimpleColumn(column: ComplexColumn) {
    return column.type === "label" || column.type === "scale";
  }

  private getLegendText(option: ComplexCountColumnMain, index: 0 | 1) {
    const len0 = option.xRange[0].toString().length;
    const len1 = option.xRange[1].toString().length;
    const len = len0 > len1 ? len0 : len1;

    const target = option.xRange[index].toString();
    if (target.length === len) {
      return `<span class="tmain">${target}</span>`;
    }

    const space = [];
    for (let i = 0; i < len - target.length; i++) {
      space.push("0");
    }

    return `<span class="tspace" style="color:transparent;">${space.join(
      ""
    )}</span><span class="tmain">${target}</span>`;
  }

  private getSimpleColumnStyle(
    column: ComplexScaleColumn | ComplexScaleColumn
  ) {
    return {
      width: (column.width || DEFAULT_COLUMN_WIDTH) + "px",
      fontSize: (column.headerFontSize || 16) + "px",
      fontWeight: column.headerFontWeight || "normal",
      color: column.headerFountColor || "#000"
    };
  }

  private getLegendStyle(option: ComplexCountColumnMain) {
    return {
      color: option.legendFontColor || "#000",
      fontWeight: option.legendFontWeight || "normal"
    };
  }

  private getCountItemStyle(
    column: ComplexLabelColumn | ComplexScaleColumn | ComplexCountColumn,
    option: ComplexCountColumnMain
  ) {
    return {
      fontSize: (option.headerFontSize || 14) + "px",
      fontWeight: option.headerFontWeight || "normal",
      color: option.headerFountColor || "#000",
      width: (column.width || DEFAULT_COLUMN_WIDTH) + "px"
    };
  }
}
</script>
<style lang="scss" scoped>
.complex-header {
  table-layout: fixed;
  .label-box {
    box-sizing: border-box;
    word-break: break-all;
    padding: 5px;
  }
  td {
    border-collapse: collapse;
    border: 1px solid #000;
    border-right: none;
    overflow: hidden;
    &:last-child {
      border-right: 1px solid #000;
    }
    &.group-item {
      padding: 0;
    }
  }
  .complex-header-item {
    text-align: center;
  }
  .clabel {
    font-size: 14px;
    padding-bottom: 0;
  }
  .clegend {
    font-size: 12px;
    & > * {
      vertical-align: middle;
    }
  }
  .count-header-item {
    border-bottom: 1px solid #000;
    padding: 5px 0;
    &:last-child {
      border-bottom: none;
    }
  }
  .legend {
    display: inline-block;
    margin: 0 7px;
    width: 30px;
    height: 3px;
  }
  .point-legend {
    margin: 0 7px;
  }

  .group-name {
    font-size: 16px;
    line-height: 50px;
  }

  ::v-deep {
    .group-header {
      td {
        &:first-child {
          border-left: none;
        }
        border-bottom: none;
        &:last-child {
          border-right: none;
        }
      }
    }
  }
}
</style>
